<template>
	<div class="batch-wrap" style="margin-left: 0px;">
		<div class="branch-box-wrap" style="min-height: auto;">
			<div class="branch-box" style="margin-top: 0px;border-left: 2px solid #ccc;min-height: auto;">
				<div class="col-box" style="padding-left: 36px;padding-right: 36px;">
					<div class="condition-node" style="min-height: auto;">
						<div class="condition-node-box" style="padding-top: 0px;">
							<div class="node-wrap-box" style="z-index: 2000;width: auto;">

								<div class="content" style="color: rgb(130, 140, 165);min-width: 257px;">

									<em class="item-index">{{nodeConfig.index}}</em>

									<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>

									<div v-if="false" class="flex" style="padding: 5px;padding-right: 25px;">
										<div class="flex ai-center jc-center">
											<div class="item-icon">
												<img
													src="https://fe-1304214004.file.myqcloud.com/images/ssp/20221215/g8tjb9yt.png">
											</div>
										</div>
										<div>
											<div class="high-light">微信公众号v3.0-收发消息</div>
											<div><span class="high-light">触发: </span>接收文本消息</div>
										</div>
									</div>

									<div v-else class="flex" style="padding: 5px;padding-right: 25px;">
										<div class="flex ai-center jc-center">
											<div class="item-icon">
												<img
													src="https://fe-1304214004.file.myqcloud.com/images/ssp/20221215/nmbwk7in.png">
											</div>
										</div>
										<div>
											<div class="high-light">批处理</div>
											<div><span>通过设定批量运行次数和逻辑，运行批处理体内的任务</span></div>
										</div>
									</div>

								</div>

							</div>
							<template v-if="nodeConfig.loopNode">
								<add-node v-model="nodeConfig.loopNode.childNode"></add-node>
							</template>
						</div>
					</div>

					<div class="while-wrap">
						<slot v-if="nodeConfig.loopNode && nodeConfig.loopNode.childNode" :node="nodeConfig.loopNode">
						</slot>
					</div>

					<!---->
					<div class="top-left-cover-line-cur" style="
    position: absolute;
    height: 50px;
    width: 50%;
    top: -10px;
    left: -5px;
    border-bottom: 2px solid #ccc;
    border-left: 5px solid #f6f8f9;
          "></div>

					<div class="top-left-cover-line"></div>
					<div class="top-right-cover-line"></div>
					<div class="bottom-right-cover-line"></div>
				</div>
			</div>
			<add-node v-model="nodeConfig.childNode"></add-node>
		</div>
		<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body :size="600">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.name}}<el-icon
							class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.name" clearable @blur="saveTitle"
						@keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="条件关系">
							<el-radio-group v-model="form.conditionMode">
								<el-radio :label="1">且</el-radio>
								<el-radio :label="2">或</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-divider></el-divider>
						<el-form-item>
							<el-table :data="form.conditionList">
								<el-table-column prop="label" label="描述">
									<template #default="scope">
										<el-input v-model="scope.row.label" placeholder="描述"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="field" label="条件字段" width="130">
									<template #default="scope">
										<el-input v-model="scope.row.field" placeholder="条件字段"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="operator" label="运算符" width="130">
									<template #default="scope">
										<el-select v-model="scope.row.operator" placeholder="Select">
											<el-option label="等于" value="="></el-option>
											<el-option label="不等于" value="!="></el-option>
											<el-option label="大于" value=">"></el-option>
											<el-option label="大于等于" value=">="></el-option>
											<el-option label="小于" value="<"></el-option>
											<el-option label="小于等于" value="<="></el-option>
											<el-option label="包含" value="include"></el-option>
											<el-option label="不包含" value="notinclude"></el-option>
										</el-select>
									</template>
								</el-table-column>
								<el-table-column prop="value" label="值" width="100">
									<template #default="scope">
										<el-input v-model="scope.row.value" placeholder="值"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="value" label="移除" width="55">
									<template #default="scope">
										<el-link type="danger" :underline="false"
											@click="deleteConditionList(scope.$index)">移除</el-link>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
						<p><el-button type="primary" icon="el-icon-plus" round
								@click="addConditionList">增加条件</el-button></p>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				index: 0,
				form: {}
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue

			console.error(this.nodeConfig)

		},
		methods: {
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show(index) {
				this.index = index
				this.form = {}
				//this.form = JSON.parse(this.safeStringify(this.nodeConfig.loopNodes[index]))
				this.drawer = true
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
			},
			save() {
				/*        this.nodeConfig.loopNodes[this.index] = this.form
				        this.$emit("update:modelValue", this.nodeConfig)
				        this.drawer = false*/
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			reData(data, addData) {
				if (!data.childNode) {
					data.childNode = addData
				} else {
					this.reData(data.childNode, addData)
				}
			},
			arrTransfer(index, type = 1) {
				this.nodeConfig.loopNodes[index] = this.nodeConfig.loopNodes.splice(index + type, 1, this.nodeConfig
					.loopNodes[index])[0]
				this.nodeConfig.loopNodes.map((item, index) => {
					item.priorityLevel = index + 1
				})
				this.$emit("update:modelValue", this.nodeConfig)
			},
			addConditionList() {
				this.form.conditionList.push({
					label: '',
					field: '',
					operator: '=',
					value: ''
				})
			},
			deleteConditionList(index) {
				this.form.conditionList.splice(index, 1)
			},
			toText(nodeConfig, index) {
				console.error(nodeConfig, index)
			}
		}
	}
</script>

<style scoped>
	.top-left-cover-line-cur::after {
		content: "";
		position: absolute;
		display: inline-block;
		width: 0;
		height: 0;
		right: 125px;
		bottom: -11px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid rgb(202, 202, 202);
	}

	.sc-workflow-design .node-wrap-box::before {
		left: calc(50% - 6px);
	}
</style>
